<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 路径开头不能加/ -->
    <link rel="stylesheet" type="text/css" href="style/style.css" />
    <link rel="stylesheet" type="text/css" href="style/index.css" />
  </head>
  <body>
    <ul></ul>
    <div class="box">
      <div class="container">
        <div class="wave">
          <div class="bubble"></div>
          <div class="bubble"></div>
          <div class="bubble"></div>
          <div class="bubble"></div>
          <div class="bubble"></div>
        </div>
      </div>
    </div>

    <div class="navbar">
      🍅
      <ul class="menu">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
      </ul>
    </div>
  </body>
  <script>
    let temp;
    let isSetColor = Boolean(0);
    let colorSystem = [
      "#ffffff",
      "#2ecc71",
      "#3498db",
      "#9b59b6",
      "#34495e",
      "#f1c40f",
      "#e67e22",
      "#e74c3c",
      "#f10fc0",
    ];
    let colorArr = {};

    const transparency = "a8";
    //颜色格式转换
    String.prototype.colorHex = function () {
      // RGB颜色值的正则
      var reg = /^(rgb|RGB)/;
      var color = this;
      if (reg.test(color)) {
        var strHex = "#";
        // 把RGB的3个数值变成数组
        var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
        // 转成16进制
        for (var i = 0; i < colorArr.length; i++) {
          var hex = Number(colorArr[i]).toString(16);
          if (hex === "0") {
            hex += hex;
          }
          strHex += hex;
        }
        return strHex;
      } else {
        return String(color);
      }
    };

    onload = function () {
      //获取存储的颜色
      colorArr = JSON.parse(localStorage.getItem("colorArr"));
      // console.log(colorArr);
      if (colorArr == null) {
        let temp = new Array(8);
        for (let i = 0; i < 8; i++) {
          temp[i] = new Array(20);
        }
        for (let i = 0; i < temp.length; i++) {
          for (let j = 0; j < temp[i].length; j++) {
            temp[i][j] = "";
          }
        }
        colorArr = { colorArr: temp };
        localStorage.setItem("colorArr", JSON.stringify(colorArr));
        console.log("修改了colorArr");
      }

      console.log(colorArr);
      const ul = document.getElementsByTagName("ul")[0];
      const container = document.getElementsByClassName("container")[0];
      const menu = document.getElementsByClassName("menu")[0];
      // TODO 生成li
      for (let i = 0; i < 8; i++) {
        for (let j = 0; j < 20; j++) {
          let li = document.createElement("li");
          li.row = i;
          li.col = j;
          li.id = i * 8 + j - 1;
          li.style.backgroundColor = colorArr.colorArr[i][j];
          ul.appendChild(li);
        }
      }

      //TODO 注册桌面点击事件，即给ul注册:球颜色给块
      ul.addEventListener("click", function (e) {
        //左键
        if (e.button == 0) {
          //TODO 如果是设置块元素，则球给块颜色,并return
          if (isSetColor) {
            let ballColor = window
              .getComputedStyle(document.getElementsByClassName("wave")[0])
              .backgroundColor.colorHex();
            // console.log(ballColor);
            //BUG好奇怪
            if (ballColor == "#f1fc0") {
              ballColor = "#f10fc0";
            }
            if (ballColor == "#f1c4f") {
              ballColor = "#f1c40f";
            }
            if (ballColor == "#ffffff") {
              e.target.style.backgroundColor = ballColor.colorHex() + "00";
              return;
            }
            e.target.style.backgroundColor =
              ballColor.colorHex() + transparency;
            //更新colorArr以及本地数据
            colorArr.colorArr[e.target.row][e.target.col] =
              ballColor.colorHex() + transparency;
            // console.log(colorArr);
            localStorage.setItem("colorArr", JSON.stringify(colorArr));
            // console.log(ballColor.colorHex() + transparency);
            return;
          }
          let liColor = window.getComputedStyle(e.target).backgroundColor;
          liColor = "rgb" + liColor.slice(4, -4) + ")";
          liColor = liColor.colorHex();
          //如果li有color
          if (liColor == "#000000") {
            //TODO 设置球颜色
            liColor = "#3498db";
            container.style.border = "solid 5px " + liColor;
            container.children[0].style.backgroundColor = liColor;
          }
        }
      });

      //BUG 滚轮能否触发,桌面版不能触发
      // window.addEventListener("wheel", function (e) {
      //   //TODO 停止ball color to block
      //   isSetColor = false;
      //   //TODO 选择颜色
      //   let currentColor = window
      //     .getComputedStyle(container.children[0])
      //     .backgroundColor.colorHex();
      //   let index = colorSystem.indexOf(currentColor);
      //   let nextIndex = index == colorSystem.length - 1 ? 0 : index + 1;
      //   container.style.border = "solid 5px " + colorSystem[nextIndex];
      //   container.children[0].style.backgroundColor = colorSystem[nextIndex];
      // });
      //TODO 单击球：停止/开始设置颜色
      menu.addEventListener("click", function (e) {
        isSetColor = false;
      });
      //TODO 设置球颜色
      let a = Array.from(document.getElementsByTagName("a"));
      a.forEach((element) => {
        element.onclick = function (e) {
          temp = e;
          console.log(e);
          e.stopPropagation();
          let selectColor = window.getComputedStyle(this).backgroundColor;
          // console.log(selectColor);
          container.style.border = "solid 5px " + selectColor;
          container.children[0].style.backgroundColor = selectColor;
          isSetColor = true;
        };
      });
    };
  </script>
</html>
